<template>
	<div id="role_list">
		<div class="table">
			<div class="container">
				<div class="handle-box">
					<div class="" style="float: left">
						<el-input v-model="searchcondition.roleName" placeholder="角色名称" class="handle-input mr10"></el-input>
						<el-button type="primary" icon="search" @click="searchCustomer">搜索</el-button>
					</div>
					<div style="float: right;padding-bottom: 10px;">
						<el-button type="primary" @click="handleEdit(null,null)" icon="add">添加</el-button>
					</div>
				</div>
				<el-table stripe :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange" v-loading="loading">
					<el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
					<el-table-column  label="角色描述">
						<template slot-scope="scope">
							<span :title="scope.row.roleDesc">{{scope.row.roleDesc}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建日期" width="150"></el-table-column>
					<el-table-column label="状态" width="100px">
						<template slot-scope="scope">
							<el-button class="status_btn no-hover" v-if="scope.row.roleStatus == 1" size="mini" type="success">启用</el-button>
							<el-button class="status_btn no-hover" v-else size="mini" type="warning">停用</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="small" type="primary" @click="editRolePrivilege(scope.row)">功能授权</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<el-dialog title="功能授权" :visible.sync="dialogFormVisible" class="dialogDiv">
			<div style="text-align:center; ">
				<div style="text-align:left;margin:0 auto;">
					<div style="line-height:30px;">角色名称: <span style="color:red;">{{selectedRoleName}}</span></div>
					<el-tree :data="rpTreeValue" ref="rpTree" show-checkbox :check-on-click-node="true" auto-expand-parent :default-expanded-keys='checkNode' node-key="id" :props="defaultProps">
					</el-tree>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveRolePrivilege()">保 存</el-button>
			</div>
		</el-dialog>

		<!--新增编辑角色-->
		<el-dialog :title="role.id ? '编辑':'添加'" :visible.sync="priDialogFormVisible3" class="dialogDiv">
			<div style="text-align:center;">
				<div style="text-align:left;width:600px;margin:0 auto;">
					<el-form :model="role" label-width="100px" class="demo-ruleForm" style="width:80%;">
						<!--<el-form-item label="角色编码" prop="RoleCode" v-if="role.ID>0">					  	
				  	 	{{role.RoleCode}}
                      </el-form-item> -->
						<el-form-item label="角色名称" prop="RoleCode">
							<el-input v-model="role.roleName" :maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="角色描述" prop="RoleName">
							<el-input type="textarea" v-model="role.roleDesc"></el-input>
						</el-form-item>
						<el-form-item label="角色状态" prop="RoleName">
							<el-radio-group v-model="role.roleStatus">
								<el-radio :label="'1'">启用</el-radio>
								<el-radio :label="'0'">停用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="priDialogFormVisible3=false">关闭</el-button>
				<el-button type="primary" @click="handleSave()">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import Vue from 'vue';
	import $ from 'jquery';
	import service from '@/js/common/roleservice.js'
	import detail from './detail';
	export default {
		components: {
			detail
		},
		data() {
			return {
				value3: true,
				value2: true,
				tableData: [],
				select_word: '',
				rpTreeValue: [],
				defaultProps: {
					children: 'childrenList',
					label: 'permissionName'
				},
				dialogFormVisible: false,
				priDialogFormVisible3: false,
				selectedRoleId: '',
				selectedRoleName: '',
				role: {
					id: '',
					roleDesc: "11",
					roleName: "22",
					roleStatus: '1'
				},
				searchcondition: {
					roleName:'',
				},
				loading: false,
				checkNode: [],

			};
		},
		created() {
			this.getData();
			let self = this;
		},
		methods: {
			getData() {
				service.getPageData(this)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				if(!index && !row) {
					this.priDialogFormVisible3 = true;
					this.role = {
						roleId: '',
						roleDesc: "",
						roleName: "",
						roleStatus: '1'
					}
					return;
				}
				this.priDialogFormVisible3 = true;
				this.role = this.tool.cloneObj(row);
			},
			roleConnentPark(index, row) {
				let self = this;
				self.$router.push({
					path: '/rolepark',
					query: {
						id: row.roleId
					}
				});
			},
			searchCustomer() {
				this.cur_page = 1;
				this.getData();
			},
			selectChange(e) {
				this.getData();
			},
			formatterDate(row, column) {
				try {
					var date1 = row.CreateDate;
					if(date1 == undefined) {
						return "";
					}
					return date1.substr(0, 10);
				} catch(err) {
					return "";
				}
			},
			handleSave() {
				let self = this;
				let role = this.role;
				//提交验证
				let rule = [{
					name: 'roleName',
					label: '角色名称',
					rule: ['validateEmpty_']
				}, {
					name: 'roleDesc',
					label: '角色描述',
					rule: ['validateEmpty_']
				}]

				if(!this.validatetool.validate(this, role, rule)) {
					return;
				};
				if(self.role.roleId) {
					let role = self.role;
					self.httptool.ajaxPost("role/update", role, (res) => {
						self.priDialogFormVisible3 = false;
						this.$message({
							message: '编辑成功！',
							type: 'success'
						});
						self.getData();
					});
				} else {
					self.addRole(self);
				}
			},
			addRole(self) {
				let role = this.role;
				self.httptool.ajaxPost("role/save", role, (res) => {
					console.log(res)
					this.getData();
					let message = '新增成功！'
					if(this.role.id) {
						message = '编辑成功！'
					}
					this.$message({
						message: message,
						type: 'success'
					});
					self.priDialogFormVisible3 = false;
				});
			},
			editRolePrivilege(row) {
				this.dialogFormVisible = true;
				this.checkNode = [];
				let param = {
					id: row.id
				};
				this.httptool.ajaxPost("role/tree", param, (res) => {
					this.rpTreeValue = res.data
					let data = this.rpTreeValue;
					for(let i = 0; i < data.length; i++) {
						this.check(data[i])
					}
					this.$refs.rpTree.setCheckedKeys(this.checkNode)
				});

				this.role = row;
			},
			check(arr) {
				if(!arr.childrenList) {
					if(arr.flag) {
						this.checkNode.push(arr.id)
					}
					return;
				}

				let len = arr.childrenList.length;
				if(len > 0) {
					for(let i = 0; i < len; i++) {
						this.check(arr.childrenList[i])
					}
				} else {
					if(arr.flag) {
						this.checkNode.push(arr.id)
					}
				}
			},
			saveRolePrivilege() { //保存角色的权限
				var self = this;
				let pids = this.$refs.rpTree.getCheckedKeys().concat(this.$refs.rpTree.getHalfCheckedKeys())

				if(pids.length == 0) {
					self.$message("请先选择要授权的功能点！");
					return false;
				}

				let params = {
					permissionIds: pids,
					roleId: this.role.id
				}
				self.httptool.ajaxPost("role/permissionUpdate", params, function(res) {
					self.$message({
						message: '权限编辑成功!',
						type: 'success'
					});
					self.dialogFormVisible = false;
				});
			},
			handleSetRoleStatus(type, index, row) {
				let self = this;
				self.$confirm('确定要' + (type == 0 ? "禁用该角色" : "启用该角色") + ', 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.httptool.ajaxPost("api/UserRole/SetRoleStatus", {
						ID: row.ID
					}, function(res) {
						if(res.suc) {
							self.getData();
						}
					});
				}).catch(() => {

				});
			}
		}
	};
</script>
<style lang="less">
	#role_list {
		.handle-box {
			margin-bottom: 20px;
		}
		
		.el-tree {
			height: 350px;
			overflow-y: scroll;
		}
		.dialogDiv {
			width: 80%;
			left: 18%;
		}
		.el-table {
			table-layout: fixed;
			.cell {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap !important;
				word-break: keep-all !important;
			}
		}
	}
</style>